import React from 'react'

//导入走马灯组件
import { Carousel, Flex, Grid, WingBlank  } from 'antd-mobile'

 //导入API
 import API from '@/utils/api'

 import {BASE_URL} from '@/utils/url'

//导入图片
import Nav1 from '../../assets/images/nav-1.png'
import Nav2 from '../../assets/images/nav-2.png'
import Nav3 from '../../assets/images/nav-3.png'
import Nav4 from '../../assets/images/nav-4.png'

//导入样式文件
import './index.scss'

//导入utils中获取当前城市定位的方法
import {getCurrentCity} from '../../utils'

import SearchHeader  from '../../components/SearchHeader'

// 导航菜单的数据
const navs = [{
    id: 0,
    img: Nav1,
    title: '整租',
    path: '/home/list'
}, {
    id: 1,
    img: Nav2,
    title: '合租',
    path: '/home/list'
}, {
    id: 2,
    img: Nav3,
    title: '地图找房',
    path: '/home/map'
}, {
    id: 3,
    img: Nav4,
    title: '去出租',
    path: '/rent/add'
}]

//获取地理位置信息
// navigator.geolocation.getCurrentPosition(position=>{
//     console.log('当前位置信息',position);
// })

/*
    轮播图存在的2个问题
        1.不会自动播放
        2.从其他路由返回的时候,高度不够
    
        原因: 轮播图的数据是动态加载的，加载完成前后轮播图数量不一致导致的问题

        如何解决
         1.在state中添加表示轮播图加载完成的数据
         2.在轮播图加载完成时,修改该状态数据为true
         3.只有在轮播图加载完成的情况下才渲染轮播图组件
 */

export default class Index extends React.Component{
    state={
        //轮播图状态数据
        swipers: [],
        //在state中添加轮播图数据是否加载完成的状态
        isSwiperLoaded: false,
        groups: [],
        // 最新资讯
        news: [],
        //当前城市名称
        curCityName: '上海',
    }
    //获取轮播图数据的方法
    async getSwipers(){
        const {data:res} = await API.get('/home/swiper')
        this.setState(()=>{
            return {
                swipers: res.body,
                isSwiperLoaded: true
            }
        })
    }
    //获租房小组数据的方法
    async getGroups(){
       const {data: res} = await API.get('/home/groups',
       {params:{
           area: 'AREA%7C88cff55c-aaa4-e2e0'
       }})
       if(res.status!==200) return
       this.setState({
        groups: res.body
       })
    }
    //获取最新数据的方法
    async getNews() {
        let { data: res } = await API.get('/home/news?area=AREA%7C88cff55c-aaa4-e2e0')
        // 判断返回的状态是否是成功
        if (res.status !== 200) {
            console.error(res.description)
            return
        }
        // 把获取到的值设置给state
        this.setState({
            news: res.body
        })
    }
    async componentDidMount(){
        this.getSwipers()
        this.getGroups()
        this.getNews()
        //通过IP定位来获取当前城市名称
        // const curCity = new window.BMap.LocalCity()
        // curCity.get(async res => {
        //     console.log('当前城市信息',res);
        //     const {data: result} = await API.get(`/area/info`,{params:{name: res.name}})
        //     this.setState({
        //         curCityName: result.body.label,
        //         isCityLoaded: true
        //     })
        // })
        const curCity = await getCurrentCity()
        this.setState({
            curCityName: curCity.label
        })
    }
    //渲染轮播图结构
    renderSwipers(){
        return (            
            this.state.swipers.map(item => (
                <a
                key={item.id}
                href="http://itcast.cn"
                style={{ display: 'inline-block', width: '100%', height: 212 }}
                >
                    <img
                        src={BASE_URL+item.imgSrc}
                        alt=""
                        style={{ width: '100%', verticalAlign: 'top' }}
                    />
                </a>
            ))
        )    
    }
    //渲染导航菜单结构
    renderNavs(){
        return (
            navs.map(item=>(
                <Flex.Item key={item.id} onClick={()=>this.props.history.push(item.path)}>
                    <img src={item.img} alt=""/>
                    <h2>{item.title}</h2>
                </Flex.Item>
            ))
        )
    }
    //渲染最新资讯的结构
    renderNews() {
        return this.state.news.map(item => {
            return (
                <div className="news-item" key={item.id}>
                    <div className="imgwrap">
                        <img
                            className="img"
                            src={BASE_URL+item.imgSrc}
                            alt=""
                        />
                    </div>
                    <Flex className="content" direction="column" justify="between">
                        <h3 className="title">{item.title}</h3>
                        <Flex className="info" justify="between">
                            <span>{item.from}</span>
                            <span>{item.date}</span>
                        </Flex>
                    </Flex>
                </div>
            )
        })
    }
    render(){
        return (
            <div className="index">
                {/* 轮播图 */}
                <div className="swiper">
                {
                    this.state.isSwiperLoaded?
                    <Carousel
                        autoplay 
                        infinite
                        autoplayInterval={1000}
                    >
                    {this.renderSwipers()}
                    </Carousel>:''
                }
                {/* 顶部导航功能 */}
                <SearchHeader curCityName={this.state.curCityName}/>
                </div>
                {/* 导航菜单 */}
                <Flex className="nav">
                    {this.renderNavs()}
                </Flex>
                {/* 租房小组 */}
                <div className="group">
                    <h3 className="group-title">
                        租房小组<span className="more">更多</span>
                    </h3>
                    <Grid 
                        data={this.state.groups} 
                        className="group-body" 
                        columnNum={2} 
                        square={false} 
                        hasLine={false} 
                        renderItem={(item) => {
                            return (
                                <Flex className="group-item" key={item.id}>
                                    <div className="desc">
                                        <p className="title">{item.title}</p>
                                        <span className="info">{item.desc}</span>
                                    </div>
                                    <img src={BASE_URL+item.imgSrc} alt=""/>
                                </Flex>
                            )
                        }}
                    />
                </div>
                 {/* 最新资讯 */}
                <div className="news">
                    <h3 className="group-title">最新资讯</h3>
                    <WingBlank size="md">{this.renderNews()}</WingBlank>
                </div>
            </div>
        )
    }
}